<section [formGroup]="checkMessageConfigForm" fxLayout="column">
  <label translate class="tb-title no-padding tb-required">tb.rulenode.data-keys</label>
  <mat-form-field floatLabel="always" class="mat-block">
    <mat-label></mat-label>
    <mat-chip-list #messageNamesChipList>
      <mat-chip
        *ngFor="let messageName of checkMessageConfigForm.get('messageNames').value;"
        (removed)="removeMessageName(messageName)">
        {{messageName}}
        <mat-icon matChipRemove>close</mat-icon>
      </mat-chip>
      <input matInput type="text" placeholder="{{'tb.rulenode.data-keys' | translate}}"
             style="max-width: 200px;"
             [matChipInputFor]="messageNamesChipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             (matChipInputTokenEnd)="addMessageName($event)"
             [matChipInputAddOnBlur]="true">
    </mat-chip-list>
  </mat-form-field>
  <div class="tb-hint" translate>tb.rulenode.separator-hint</div>
  <label translate class="tb-title no-padding tb-required">tb.rulenode.metadata-keys</label>
  <mat-form-field floatLabel="always" class="mat-block">
    <mat-label></mat-label>
    <mat-chip-list #metadataNamesChipList>
      <mat-chip
        *ngFor="let metadataName of checkMessageConfigForm.get('metadataNames').value;"
        (removed)="removeMetadataName(metadataName)">
        {{metadataName}}
        <mat-icon matChipRemove>close</mat-icon>
      </mat-chip>
      <input matInput type="text" placeholder="{{'tb.rulenode.metadata-keys' | translate}}"
             style="max-width: 200px;"
             [matChipInputFor]="metadataNamesChipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             (matChipInputTokenEnd)="addMetadataName($event)"
             [matChipInputAddOnBlur]="true">
    </mat-chip-list>
  </mat-form-field>
  <div class="tb-hint" translate>tb.rulenode.separator-hint</div>
  <mat-checkbox fxFlex formControlName="checkAllKeys" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.check-all-keys' | translate }}
  </mat-checkbox>
  <div class="tb-hint" translate>tb.rulenode.check-all-keys-hint</div>
</section>
